# Component: Date Time

Inline temporal data renderer with time zone awareness

Inline Block

![[Pasted image 20260426082627.png]]

### BEM Anatomy

| Type      | Class Name         | Description                                                               |
| --------- | ------------------ | ------------------------------------------------------------------------- |
| ==Block== | `.as-date-time`    | Main inline wrapper. Prevents line breaks with `white-space: nowrap`.     |
| Element   | `__icon`           | Optional prefix icon (e.g., calendar or clock). Has a fixed right margin. |
| Element   | `__value`          | The formatted date/time string.                                           |
| Modifier  | `__value--browser` | Applied when the time is converted to the user's local browser timezone.  |
| Modifier  | `__value--system`  | Applied when the time is rendered using UTC/System default (fallback).    |

### Internal Logic & Layout

The component ensures a clean horizontal flow by injecting a small margin after the icon element and forcing a single-line display.

##### Generated HTML (Local Browser Time)

```html
<span class="as-date-time">
    <i class="as-date-time__icon fa-regular fa-calendar"></i>
    <span class="as-date-time__value as-date-time__value--browser">
        Saturday, April 25, 2026
    </span>
</span>
```

##### SCSS

```scss
.as-date-time {
  white-space: nowrap; // Keeps icon and date together
  
  i {
    // Spacing between icon and value
    margin-right: $spacer * 0.25; 
  }
}
```
